<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汇问 - 管理员面板</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/admin_index.css">
</head>
<body class="font-inter bg-gray-50 min-h-screen flex">
    <!-- 左侧导航栏 -->
    <div class="nav">
        <div class="logo">
            <img src="../static/image/logo.png" alt="logo">
            <p>汇问 - 管理员</p>
        </div>
        <div class="content">
            <div class="search">
                <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
                    <path d="M94.28134 596.789688a400.282438 400.282438 0 0 0 101.23928 170.062882 399.600002 399.600002 0 0 0 127.683648 86.055094c49.442439 21.087251 102.638272 31.835608 156.380054 31.596756 53.571173 0.102365 106.630519-10.645991 155.936471-31.596756a405.912529 405.912529 0 0 0 127.683649-86.055094 399.736489 399.736489 0 0 0 86.089215-127.71777c21.05313-49.408317 31.801486-102.638272 31.596756-156.380054a400.043585 400.043585 0 0 0-31.153173-156.380054 405.980773 405.980773 0 0 0-86.089215-127.683648 399.600002 399.600002 0 0 0-127.683649-86.055094 394.788833 394.788833 0 0 0-156.380054-31.596756 400.418925 400.418925 0 0 0-156.380054 31.596756 407.106791 407.106791 0 0 0-127.683648 86.055094 399.600002 399.600002 0 0 0-86.089216 127.683648 394.891199 394.891199 0 0 0-31.596755 156.380054c0 19.722381 1.398992 39.342396 4.26522 58.72356h19.108189l72.747606-123.043089a26.922073 26.922073 0 0 1 12.625053-12.625053 24.73828 24.73828 0 0 1 28.59404 5.118265l0.443583 0.545948c2.729741 2.797985 4.811169 6.141918 6.073674 9.758825l70.7003 167.606115 111.544053-386.258392a28.457553 28.457553 0 0 1 17.675075-18.596362c13.751072-4.43583 28.457553 3.753394 32.586286 18.391631l98.202443 339.340964h111.10047c2.183793 0 4.401708 0.307096 6.517258 0.887166 8.974024-17.060883 25.932542-28.559918 45.689044-28.559918 28.798771 0 52.206302 24.670037 52.206302 55.209017 0 30.538981-23.305166 55.209017-52.206302 55.209018-19.756503 0-36.71502-11.499035-45.689044-28.525797a22.349757 22.349757 0 0 1-6.517258 0.989531h-130.583998c-12.761541 0-23.202801-9.417607-25.591325-22.145026l-78.138844-270.073778-107.176467 370.425892a25.830177 25.830177 0 0 1-31.903852 18.493997 26.614978 26.614978 0 0 1-17.436222-15.627768l-79.298984-188.079175-55.550236 93.937222a25.727812 25.727812 0 0 1-23.066313 12.966271h-20.47306z m918.89916 372.50732a32.07446 32.07446 0 0 1-45.654923 45.177219l-172.110188-172.14431a476.442219 476.442219 0 0 1-315.831067 119.153207C214.901783 961.483124 0.173509 746.857215 0.173509 482.174676 0.173509 217.492137 214.799418 2.661498 479.584322 2.661498c264.819026 0 479.5473 214.728274 479.5473 479.513178a476.612828 476.612828 0 0 1-118.095432 314.875657l172.14431 172.246675z" fill="#1684FC"></path>
                </svg>
                <a href="/admin">用户管理</a>
            </div>
            <div class="classify">
                <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
                    <path d="M761.978355 509.439688c-46.817282 0-90.831728-18.231223-123.93466-51.334155l-61.620429-61.624523c-33.106002-33.102932-51.337225-77.116355-51.337225-123.932614s18.231223-90.831728 51.338249-123.93773l61.619406-61.619406c33.103956-33.103956 77.117378-51.335179 123.93466-51.335179s90.832751 18.231223 123.935684 51.335179l61.618383 61.619406c33.107025 33.106002 51.338249 77.121472 51.338249 123.93773s-18.231223 90.829681-51.338249 123.933637l-61.618383 61.623499C852.811106 491.208465 808.795637 509.439688 761.978355 509.439688zM761.978355 72.495104c-36.977169 0-71.739904 14.398942-97.886401 40.545438l-61.619406 61.619406c-26.14752 26.14752-40.547485 60.912301-40.547485 97.888448 0 36.975123 14.399965 71.737858 40.547485 97.883331l61.620429 61.625546c26.145473 26.144450 60.908208 40.544415 97.885378 40.544415 36.978193 0 71.739904-14.398942 97.886401-40.544415l61.618383-61.623499c26.148543-26.146497 40.548508-60.909232 40.548508-97.884354 0-36.976146-14.399965-71.739904-40.547485-97.888448l-61.619406-61.619406C833.718259 86.895069 798.956547 72.495104 761.978355 72.495104z" fill="#1684FC"></path>
                    <path d="M289.508673 491.393683l-87.143733 0c-96.644107 0-175.270862-78.625732-175.270862-175.270862l0-87.148849c0-96.644107 78.625732-175.270862 175.270862-175.270862l87.143733 0c96.645131 0 175.270862 78.625732 175.270862 175.270862l0 87.148849C464.779535 412.766928 386.153804 491.393683 289.508673 491.393683zM202.364941 90.542132c-76.331479 0-138.431839 62.10036-138.431839 138.431839l0 87.148849c0 76.331479 62.10036 138.431839 138.431839 138.431839l87.143733 0c76.331479 0 138.431839-62.10036 138.431839-138.431839l0-87.148849c0-76.331479-62.10036-138.431839-138.431839-138.431839L202.364941 90.542132z" fill="#1684FC"></path>
                    <path d="M805.549709 996.451574l-87.142709 0c-96.644107 0-175.270862-78.625732-175.270862-175.269839l0-87.148849c0-96.644107 78.626755-175.269839 175.270862-175.269839l87.142709 0c96.644107 0 175.270862 78.625732 175.270862 175.269839l0 87.148849C980.820572 917.825842 902.193817 996.451574 805.549709 996.451574zM718.407 595.601046c-76.332503 0-138.431839 62.10036-138.431839 138.430816l0 87.148849c0 76.331479 62.10036 138.430816 138.431839 138.430816l87.142709 0c76.332503 0 138.431839-62.10036 138.431839-138.430816l0-87.148849c0-76.331479-62.10036-138.430816-138.431839-138.430816L718.407 595.601046z" fill="#1684FC"></path>
                    <path d="M289.508673 996.451574l-87.143733 0c-96.644107 0-175.270862-78.625732-175.270862-175.269839l0-87.148849c0-96.644107 78.625732-175.269839 175.270862-175.269839l87.143733 0c96.645131 0 175.270862 78.625732 175.270862 175.269839l0 87.148849C464.779535 917.825842 386.153804 996.451574 289.508673 996.451574zM202.364941 595.601046c-76.331479 0-138.431839 62.10036-138.431839 138.430816l0 87.148849c0 76.331479 62.10036 138.430816 138.431839 138.430816l87.143733 0c76.331479 0 138.431839-62.10036 138.431839-138.430816l0-87.148849c0-76.331479-62.10036-138.430816-138.431839-138.430816L202.364941 595.601046z" fill="#1684FC"></path>
                </svg>
                <a href="/system">系统管理</a>
            </div>
        </div>
        <div class="exit">
            <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
                <path d="M778.666667 202.666667H384v-64h458.666667v746.666666H384v-64h394.666667V202.666667z" fill="#d81e06"></path>
                <path d="M85.333333 522.496L362.752 682.666667v-97.706667h243.285333v-128H362.752V362.325333L85.333333 522.496z" fill="#d81e06"></path>
            </svg>
            <p>退出登录</p>
        </div>
    </div>

    <!-- 主要内容 -->
    <div class="flex-grow">
        <!-- 主要内容 -->
        <main class="flex-grow container mx-auto px-4 py-8">
            <div class="bg-white rounded-xl shadow-lg p-6 mb-6">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-xl font-bold text-dark">用户管理</h2>
                    <button id="addUserBtn" class="btn btn-primary flex items-center">
                        <i class="fa fa-plus-circle mr-1"></i> 添加用户
                    </button>
                </div>

                <!-- 搜索框 -->
                <div class="flex justify-between items-center mb-6">
                    <div class="search-container">
                        <i class="fa fa-search text-gray-400"></i>
                        <input type="text" id="searchUser" placeholder="搜索用户名或邮箱..." class="search-input">
                        <button onclick="searchUsers()" class="search-button">
                            搜索
                        </button>
                        <button onclick="resetSearch()" class="reset-button">
                            <i class="fa fa-refresh mr-1"></i> 重置
                        </button>
                    </div>
                </div>

                <!-- 用户列表表格 -->
                <div class="overflow-x-auto">
                    <table class="min-w-full">
                        <thead>
                            <tr>
                                <th scope="col">ID</th>
                                <th scope="col">用户名</th>
                                <th scope="col">邮箱</th>
                                <th scope="col">角色</th>
                                <th scope="col">操作</th>
                            </tr>
                        </thead>
                        <tbody id="userTableBody">
                            <!-- 用户数据将通过 JavaScript 动态加载 -->
                            <tr class="loading-row">
                                <td colspan="5">
                                    <i class="fa fa-spinner fa-spin mr-2"></i> 正在加载用户数据...
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 分页 -->
                <div class="flex items-center justify-between px-4 py-3 sm:px-6 mt-4">
                    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                        <div>
                            <p class="text-sm text-gray-700">
                                显示 <span id="startRecord">0</span> 到 <span id="endRecord">0</span> 条，共 <span id="totalRecords">0</span> 条结果
                            </p>
                        </div>
                        <div>
                            <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                                <button id="prevPage" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                                    <span class="sr-only">上一页</span>
                                    <i class="fa fa-chevron-left text-xs"></i>
                                </button>
                                <button id="nextPage" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                                    <span class="sr-only">下一页</span>
                                    <i class="fa fa-chevron-right text-xs"></i>
                                </button>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 添加用户模态框 -->
    <div id="addUserModal" style="display: none;">
        <div id="modalContent">
            <div class="p-6">
                <div class="modal-header">
                    <h3 class="text-lg font-bold text-dark">添加用户</h3>
                    <button onclick="closeAddUserModal()" class="text-gray-400 hover:text-gray-500">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
                <form id="addUserForm">
                    <div class="mb-4">
                        <label for="newUsername" class="block text-sm font-medium text-gray-700">用户名</label>
                        <input type="text" id="newUsername" name="username" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm" required>
                    </div>
                    <div class="mb-4">
                        <label for="newEmail" class="block text-sm font-medium text-gray-700">邮箱</label>
                        <input type="email" id="newEmail" name="email" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm" required>
                    </div>
                    <div class="mb-4">
                        <label for="newPassword" class="block text-sm font-medium text-gray-700">密码</label>
                        <input type="password" id="newPassword" name="password" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm" required>
                    </div>
                    <div class="mb-4">
                        <label for="newRole" class="block text-sm font-medium text-gray-700">角色</label>
                        <select id="newRole" name="role" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm" required>
                            <option value="user">普通用户</option>
                            <option value="admin">管理员</option>
                        </select>
                    </div>
                    <div class="flex justify-end space-x-3">
                        <button type="button" onclick="closeAddUserModal()" class="btn btn-secondary">取消</button>
                        <button type="submit" class="btn btn-primary">添加</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 编辑用户模态框 -->
    <div id="editUserModal" style="display: none;">
        <div class="edit-modal-content">
            <div class="p-6">
                <div class="modal-header">
                    <h3 class="text-lg font-bold text-dark">编辑用户</h3>
                    <button onclick="closeModal('editUserModal')" class="text-gray-400 hover:text-gray-500">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
                <form id="editUserForm">
                    <input type="hidden" id="editUserId" name="id">
                    <div class="mb-4">
                        <label for="editUsername" class="block text-sm font-medium text-gray-700">用户名</label>
                        <input type="text" id="editUsername" name="username" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm" required>
                    </div>
                    <div class="mb-4">
                        <label for="editEmail" class="block text-sm font-medium text-gray-700">邮箱</label>
                        <input type="email" id="editEmail" name="email" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm" required>
                    </div>
                    <div class="mb-4">
                        <label for="editPassword" class="block text-sm font-medium text-gray-700">新密码 (留空不修改)</label>
                        <input type="password" id="editPassword" name="password" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm">
                    </div>
                    <div class="mb-4">
                        <label for="editRole" class="block text-sm font-medium text-gray-700">角色</label>
                        <select id="editRole" name="role" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm" required>
                            <option value="user">普通用户</option>
                            <option value="admin">管理员</option>
                        </select>
                    </div>
                    <div class="flex justify-end space-x-3">
                        <button type="button" onclick="closeModal('editUserModal')" class="btn btn-secondary">取消</button>
                        <button type="submit" class="btn btn-primary">保存更改</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 提示消息容器 -->
    <div id="toast-container"></div>

    <script src="../static/js/admin_index.js"></script>
</body>
</html>